<template>
  <div style="width:100%;height:100%;">
    <div class="model4Title">
      <div class="title">检测数据月份分布</div>
      <div>
        <div class="dialogTabs">
          <div />
          <div style="display: flex">
            <div
              v-for="(item, index) in tabs"
              :key="index"
              class="dialogtabLis"
              :class="current == index ? 'dialogTabsAction' : ''"
              @click="current = index">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="model4Content">
      <div v-for="(item,index) in data" :key="index" class="td">
        <div class="one">{{ item.year }}</div>
        <div
          v-for="(r,i) in item.data"
          :key="i"
          class="tdTo"
          width="148"
          height="132">
          <div style="width:100%;display:flex; align-items: center;">
            <div class="default1">
              <div style="width:50%" class="default">{{ i + 1 }}月</div>
              <div style="width:50%">{{ r }}</div>
            </div>
            <div v-if="i != item.data.length - 1" class="interval" />
          </div>
        </div>
        <!-- <el-popover
          v-for="(r,i) in item.data"
          :key="i"
          class="tdTo"
          placement="right"
          popper-class="indexDialog4"
          width="148"
          height="132"
          trigger="click"
          :visible-arrow="false">
          <div>xxx供电段</div>
          <div>区站：岳阳东-汨罗东</div>
          <div>检测月份：2020年2月</div>
          <div>计划次数：3次</div>
          <div>检测次数：1次</div>
          <div slot="reference" style="width:100%;display:flex; align-items: center;">
            <div class="default1">
              <div style="width:50%" class="default">{{ i + 1 }}月</div>
              <div style="width:50%">{{ r }}</div>
            </div>
            <div v-if="i != item.data.length - 1" class="interval" />
          </div>
        </el-popover> -->
      </div>
    </div>
  </div>
</template>
<script>
import { checkDataMonthDistribution } from '@/api/cms/index/index.js'

export default {
  props: {
    ctype: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      value: '',
      tabs: ['累计', '近3年', '近2年', '近1年'],
      current: 0,
      data: []
    }
  },
  computed: {
    type() {
      return this.current === 0 ? ' ' : this.current === 1 ? 3 : this.current === 2 ? 2 : this.current === 3 ? 1 : ''
    }
  },
  watch: {
    current() {
      this.init()
    },
    ctype() {
      this.init()
    },
    railTypes() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      checkDataMonthDistribution({
        cType: this.ctype,
        type: this.type,
        railTypeList: this.railTypes.split(',')
      }).then(res => {
        this.data = res.data
      })
    }

  }
}
</script>
<style  scoped>
.model4Title {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
}
.model4Title .title {
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.model4Title .title span {
  font-size: 14px;

  color: #c0796a;
}
.dialogTabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.dialogTabsAction {
  background: #0a2b52 !important;
  border: 1px solid #66ffff !important;
  box-sizing: border-box;
  color: rgba(102, 255, 255, 1) !important;
}
.dialogtabLis {
  padding: 0 12px;
  height: 36px;
  background: #0f1f56;
  border: 1px solid rgba(84, 113, 255, 0.6);
  line-height: 36px;
  text-align: center;
  font-weight: 350;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
/deep/.el-select {
  width: 150px;
  margin-right: 20px;
}
/deep/.el-select-dropdown {
  background-color: #0f1f56 !important;
  border: 0;
}
/deep/.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #0f1f56 !important;
}
/deep/.el-input__inner {
  background: #0f1f56;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(84, 113, 255, 0.6);
  box-sizing: border-box;
  border-radius: 2px;
}
.sort {
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.model4Content {
  height: calc(100% - 56px);
  overflow: auto;
  padding: 20px;
}
.one {
  width: 7.5%;
  height: 100%;
  font-size: 14px;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
}
.to {
  width: 7.7%;
  font-size: 12px;
  color: #ffffff;
}
.td {
  display: flex;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
}
.tdTo {
  width: 7.5%;
  height: 100%;
  display: flex;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  line-height: 30px;
  text-align: center;
}
.default {
  background: #1f3275;
  border-radius: 4px;
}
.default1 {
  background: #0b7cce;
  width: 100%;
  cursor: pointer;
  width: 80%;
  display: flex;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  line-height: 30px;
  text-align: center;
}

.model4Content::-webkit-scrollbar {
  width: 4px;
  background: #0f1f56 !important;
}
::-webkit-scrollbar-track {
  background-color: #0f1f56;
}
::-webkit-scrollbar-thumb {
  border: 0 !important;
  background-color: rgba(105, 115, 133, 0.3);
}
.interval {
  width: 20%;
  height: 1px;
  background-color: #033c93;
}
</style>
